<template>
  <div>
    <el-dialog v-model="dialogVisiable" :title="isEdit ? '编辑' : '新增'">
      <el-form :rules="formRules" ref="form">
        <el-form-item label="设备类型" prop="eqtype">
          <el-select v-model="formData.eqtype" placeholder="选择设备类型" style="width: 240px">
            <el-option v-for="item in eqTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="表组网类型">
          <div class="my-2 flex items-center text-sm">
            <el-radio-group v-model="formData.ta_net_type" class="ml-4">
              <el-radio label="采集器电表">采集器电表</el-radio>
              <el-radio label="无线电表">无线电表</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="通信方式" prop="communication">
          <el-select v-model="formData.communication" placeholder="选择通信方式" style="width: 240px">
            <el-option v-for="item in communicationOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item :required="true" label="抄表选项">
          <el-select v-model="formData.meter_option" multiple placeholder="选择抄表选项" style="width: 240px">
            <el-option v-for="item in meterOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisiable = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from "vue"
import { FormRules } from "element-plus"

// 定义组件参数, modelValue控制dialog的显示, isEdit设置组件类型
const props = defineProps(['modelValue', 'isEdit'])
// 定义组件可以传递的事件
const emit = defineEmits(['update:modelValue', 'added'])
// 控制dialog显示, 由计算属性实现
const dialogVisiable = computed({
  get() {
    // 返回父组件传入的参数, 使得dialog显示可以由父组件控制
    return props.modelValue
  },
  set(v) {
    // 传递事件, 告诉父组件要修改传入的参数（modelValue）的值为v
    emit('update:modelValue', v)
  }
})

// 表单规则
const formRules = reactive<FormRules>({
  eqtype: [
    { required: true, message: '请选择设备类型', trigger: 'change' },
  ],
  communication: [
    { required: true, message: '请选择设备类型', trigger: 'change' }
  ]
})
// 设备类型选项
const eqTypeOptions = [
  {
    value: 'a',
    label: 'a',
  },
  {
    value: 'b',
    label: 'b',
  },
  {
    value: 'c',
    label: 'c',
  },
  {
    value: 'd',
    label: 'd',
  },
  {
    value: 'e',
    label: 'e',
  },
]

// 通信方式选项
const communicationOptions = [
  {
    value: 'LORA',
    label: 'LORA',
  },
  {
    value: '485',
    label: '485',
  },
  {
    value: '蓝牙',
    label: '蓝牙',
  },
  {
    value: '3G',
    label: '3G',
  },
  {
    value: '4G',
    label: '4G',
  },
  {
    value: '其他',
    label: '其他',
  },
]

// 抄表选项
const meterOptions = [
  {
    value: '单相电压',
    label: '单相电压',
  },
  {
    value: '单相电流',
    label: '单相电流',
  },
  {
    value: '频率',
    label: '频率',
  },
  {
    value: '总电量',
    label: '总电量',
  },
  {
    value: '剩余金额',
    label: '剩余金额',
  },
]

// 写死的表单数据, 可以由父组件传进来
const formData = reactive({
  ta_net_type: "采集器电表",
  communication: "LORA",
  eqtype: "a",
  meter_option: "单相电压",
})

// 确定
function confirm() {
  if (props.isEdit) {
    console.log('编辑了:', formData);
  } else {
    console.log('添加了:', formData);
    emit('added', formData)
  }
  dialogVisiable.value = false;
}
</script>

<style scoped>
</style>
